<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/yb' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#/yb">课程管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button-group class="bunGrp">
      <el-button size="small" type="primary" @click="add()">新增</el-button>
      <el-button size="small" type="warning" @click="up()">修改</el-button>
      <el-button size="small" type="danger" @click="del()">删除</el-button>
    </el-button-group>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title" autofocus></el-input>
          </el-form-item>
          <el-form-item label="选择分类">
            <el-cascader v-model="type_value" :options="options" @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="课程图片" prop="img">
            <el-input v-model="ruleForm.img"></el-input>
          </el-form-item>
          <el-form-item label="学习人数" prop="people">
            <el-input v-model="ruleForm.people"></el-input>
          </el-form-item>
          <el-form-item label="现价" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>
          <el-form-item label="原价">
            <el-input v-model="ruleForm.price_old"></el-input>
          </el-form-item>
          <el-form-item label="是否推荐" prop="is_rem">
            <template>
              <el-radio v-model="ruleForm.is_rem" label="1">推荐</el-radio>
              <el-radio v-model="ruleForm.is_rem" label="0">不推荐</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="授课方式" prop="type">
            <template>
              <el-radio v-model="ruleForm.type" label="1">直播</el-radio>
              <el-radio v-model="ruleForm.type" label="2">录播</el-radio>
              <el-radio v-model="ruleForm.type" label="3">一对一授课</el-radio>
              <el-radio v-model="ruleForm.type" label="4">其他</el-radio>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <template>
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        style="width: 100%"
        height="60vh"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" align="center" label="id"></el-table-column>
        <el-table-column prop="title" align="center" label="课程名"></el-table-column>
        <el-table-column align="center" label="课程大类">
          <template slot-scope="scope">
            <p>{{scope.row.level_1|classbig(bigarr)}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课程小类">
          <template slot-scope="scope">
            <p>{{scope.row.level_2|classsmail(smailarr)}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="授课方式">
          <template slot-scope="scope">
            <p>{{scope.row.type|classtype}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <img :src="scope.row.img" width="100px" height="50px" alt />
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">鼠标移上预览</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="people" label="学习人数"></el-table-column>
        <el-table-column align="center" label="现价">
          <template slot-scope="scope">{{scope.row.price}}元</template>
        </el-table-column>
        <el-table-column align="center" label="原价">
          <template slot-scope="scope">{{scope.row.price_old}}元</template>
        </el-table-column>
        <el-table-column align="center" label="是否推荐">
          <template align="center" slot-scope="scope">
            <span v-if="scope.row.is_rem">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totols"
        :page-size="pagesize"
        style="padding-top:20px"
        :current-page="currentPage"
        @current-change="changepage"
      ></el-pagination>
    </template>
  </div>
</template>
<script>
import qs from "qs";
import { IP } from "../util/util";
export default {
  data() {
    return {
      loading:true,
      type_value: [],
      options: [],
      tableData: [],
      totols: 10,
      currentPage: 1,
      pagesize: 5,
      dialogVisible: false,
      multipleSelection: [],
      ruleForm: {
        title: "",
        img: "",
        people: "",
        price: "",
        price_old: "",
        level_1: "",
        level_2: "",
        is_rem: "",
        type: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ],
        img: [{ required: true, message: "请输入图片路径", trigger: "blur" }],
        is_rem: [
          { required: true, message: "请选择是否推荐", trigger: "blur" }
        ],
        type: [{ required: true, message: "请选择授课方式", trigger: "blur" }]
      },
      bigarr: [],
      smailarr: [],
      test: 1
    };
  },
  mounted() {
    this.getdatabig();
    this.getdatasmail();
    this.getdata();
    // console.log(IP);
  },
  filters: {
    classbig: function(value, bigarr) {
      for (let i = 0; i < bigarr.length; i++) {
        if (value == bigarr[i].id) {
          return bigarr[i].title;
        }
      }
    },
    classsmail: function(value, smailarr) {
      for (let i = 0; i < smailarr.length; i++) {
        if (value == smailarr[i].id) {
          return smailarr[i].title;
        }
      }
    },
    classtype: function(value) {
      let typearr = ["直播", "录播", "一对一约课", "其他"];
      return typearr[value - 1];
    }
  },
  methods: {
    up() {
      let checked = this.multipleSelection;
      if (checked.length == 1) {
        this.changeclass();
        this.fromtype = "up";
        this.dialogVisible = true;
        console.log(checked[0]);
        this.ruleForm = checked[0];
        // console.log(this.type_value);
        this.type_value[0] = checked[0]["level_1"];
        this.type_value[1] = checked[0]["level_2"];
        console.log();
      } else {
        this.$message.error("请先选择一项!!");
      }
    },
    del() {
      let checked = this.multipleSelection;
      if (checked.length) {
        this.$confirm("确定要删除么？")
          .then(_ => {
            let ids = [];
            for (let i = 0; i < checked.length; i++) {
              ids.push(checked[i].id);
            }
            this.$ajax({
              url: "http://" + IP + "/tp5/public/index.php/index/classall/del",
              method: "post",
              data: qs.stringify({
                id: ids.join(",")
              })
            }).then(res => {
              console.log(res);
              if (res) {
                this.getdata();
                this.$message.success("删除成功！");
              }
            });
          })
          .catch(_ => {});
      } else {
        this.$message.error("请先选择选项!!");
      }
    },
    add() {
      this.dialogVisible = true;
      this.changeclass();
    },
    changeclass() {
      let bigarr = this.bigarr;
      let smailarr = this.smailarr;
      let newbigarr = [];
      let newsmailarr = [];
      for (var i = 0; i < bigarr.length; i++) {
        newbigarr[i] = {};
        newbigarr[i].value = bigarr[i].id;
        newbigarr[i].label = bigarr[i].title;
        var childrenarr = [];
        for (var j = 0; j < smailarr.length; j++) {
          newsmailarr[j] = {};
          newsmailarr[j].value = smailarr[j].id;
          newsmailarr[j].label = smailarr[j].title;
          if (smailarr[j].pid == bigarr[i].id) {
            childrenarr.push(newsmailarr[j]);
          }
        }
        // console.log(childrenarr);
        if (childrenarr.length) {
          newbigarr[i].children = childrenarr;
        }
      }
      this.options = newbigarr;
    },
    handleChange(value) {
      this.ruleForm.level_1 = value[0];
      this.ruleForm.level_2 = value[1];
      console.log(value);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitbanner(formName);
        } else {
          this.$message.error("请输入必填项!!");
          return false;
        }
      });
    },
    submitbanner(formName) {
      console.log(this.ruleForm);
      // return;
      var upid = this.multipleSelection[0] ? this.multipleSelection[0].id : "";
      this.$ajax({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        url: "http://" + IP + "/tp5/public/index.php/index/classall/save",
        // url: "http://" + IP + "/api.php/test/classall",
        method: "post",
        data: qs.stringify({
          title: this.ruleForm.title,
          img: this.ruleForm.img,
          desc: this.ruleForm.desc,
          price: this.ruleForm.price,
          price_old: this.ruleForm.price_old,
          people: this.ruleForm.people,
          type: this.ruleForm.type,
          level_1: this.ruleForm.level_1,
          level_2: this.ruleForm.level_2,
          is_rem: this.ruleForm.is_rem,
          fromType: this.fromtype,
          id: upid
        })
        // data: qs.stringify(this.ruleForm)
      }).then(res => {
        if (res) {
          this.getdata();
          this.$message.success(
            this.fromtype == "add" ? "添加成功！" : "修改成功！"
          );
          this.resetForm("ruleForm");
        }
      });
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.fromtype = "add";
      this.$refs[formName].resetFields();
      this.ruleForm = {
        title: "",
        img: "",
        people: "",
        price: "",
        price_old: "",
        level_1: "",
        level_2: "",
        is_rem: "",
        type: ""
      };
      this.getdata();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
          this.resetForm("ruleForm");
        })
        .catch(_ => {});
    },
    changepage(page) {
      if (this.currentPage != page) {
        this.currentPage = page;
        this.getdata();
      }
      // console.log(page)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    getdata() {
      this.$ajax({
        // url: "http://" + IP + "/api.php/test/classall",
        url: "http://" + IP + "/tp5/public/index.php/index/classall",
        method: "get",
        // params: {
        //   transform: 1,
        //   order: "id,desc",
        //   page: `${this.currentPage},10`
        // }
        params: {
          pageCurrent: this.currentPage,
          pageSize: this.pagesize
        }
      }).then(res => {
        // console.log(res.data)
        this.loading = false;
        this.tableData = res.data.data.list;
        this.totols = res.data.data.count;
        // this.tableData = res.data.classall;
        // this.totols = res.data._results;
        // console.log(res.data.banner);
        // return;
        // console.log(res);
      });
    },
    getdatabig() {
      this.$ajax({
        // url: "http://" + IP + "/api.php/test/classes",
        url: "http://" + IP + "/tp5/public/index.php/index/classes",
        method: "get",
        // params: {
        //   transform: 1
        // }
        params: {
          pageCurrent: 1,
          pageSize: 100
        }
      }).then(res => {
        this.bigarr = res.data.data.list;
        // this.bigarr = res.data.classes;
        // console.log(res.data.classes);
      });
    },
    getdatasmail() {
      this.$ajax({
        // url: "http://" + IP + "/api.php/test/reclass",
        url: "http://" + IP + "/tp5/public/index.php/index/classes/lists",
        method: "get",
        // params: {
        //   transform: 1
        // }
        params: {
          pageCurrent: 1,
          pageSize: 100
        }
      }).then(res => {
        this.smailarr = res.data.data.list;
        // this.smailarr = res.data.reclass;
        console.log(res.data.data.list);
      });
    }
  }
};
</script>

<style scoped>
.bunGrp {
  margin-top: 10px;
}
/* .el-dialog{
    margin-top: 5vh;
    margin: 0 auto;
} */
.el-dialog__body {
  padding: 10px 20px 0;
}
.el-dialog__footer {
  padding: 0px 20px 20px;
}
</style>
